<template>
  <el-collapse-item name="equipOperationStatus">
    <div class="top" slot="title">
      <PartitionTitle title="设备运行情况" type="line"></PartitionTitle>
    </div>
    <el-table :data="list" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column label="停机设备" prop="equipName"></el-table-column>
      <el-table-column
        label="停机开始时间"
        prop="latestOffStartTime"
      ></el-table-column>
      <el-table-column
        label="停机结束时间"
        prop="latestOffEndTime"
      ></el-table-column>
      <el-table-column
        label="累计停机时长(分钟)"
        prop="totalOffMinutes"
      ></el-table-column>
      <el-table-column label="停机原因" prop="offReason"></el-table-column>
    </el-table>
  </el-collapse-item>
</template>
<script>
import { getEquipOffLogByProduceLogId } from "@/api/shifts/shiftHandover";
import { mapState } from "vuex";
export default {
  props: {
    detailKey: {
      type: String,
      default: "handoverDetail",
    },
  },
  data() {
    return {
      list: [
        
      ],
    };
  },
  computed: {
    ...mapState({
      handoverDetail: (state) => state.turnOnDuty.handoverDetail,
    }),
    detailsData() {
      return this[this.detailKey];
    },
  },
  methods: {
    getData() {
      if (!this.detailsData) {
        return;
      }
      const { lineId, classesStartTime, classesEndTime } = this.detailsData;
      const param = {
        lineId,
        classesStartTime,
        classesEndTime,
      };
      getEquipOffLogByProduceLogId(param)
        .then((res) => {
          this.list = res?.data || [];
        })
        .catch((err) => {
          this.list = [];
        });
    },
  },
  watch: {
    detailsData: {
      handler(newVal) {
        if (newVal) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin: 20px 0 10px;
}
.block-title {
  margin-bottom: 0;
}
</style>
